<template>
  <div class="image-rotator-page">
    <div class="rotator-container">
      <h1>在线旋转图片</h1>
      
      <div class="content-wrapper">
        <div class="upload-area" @click="triggerUpload" v-if="!imageUrl">
          <el-icon class="upload-icon"><Upload /></el-icon>
          <p>点击或拖拽图片到此处</p>
          <input 
            type="file" 
            ref="fileInput" 
            @change="handleFileChange" 
            accept="image/*" 
            class="file-input"
          >
        </div>

        <div class="image-area" v-else>
          <img 
            :src="imageUrl" 
            :style="{ transform: `rotate(${rotation}deg)` }" 
            class="preview-image"
            ref="previewImage"
          >
          
          <div class="controls">
            <el-button-group>
              <el-button type="primary" @click="rotate(-90)">
                <el-icon><RefreshLeft /></el-icon>
                向左旋转
              </el-button>
              <el-button type="primary" @click="rotate(90)">
                <el-icon><RefreshRight /></el-icon>
                向右旋转
              </el-button>
            </el-button-group>
          </div>

          <div class="button-group">
            <div class="button-wrapper">
              <el-button type="success" @click="downloadImage">
                <el-icon><Download /></el-icon>
                下载图片
              </el-button>
              <el-button type="danger" @click="clearImage">
                <el-icon><Delete /></el-icon>
                清除图片
              </el-button>
              <el-button type="warning" @click="returnToHome">
                <el-icon><Back /></el-icon>
                返回首页
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <div class="notes">
        <h3>帮助说明：</h3>
        <ul>
          <li>支持常见图片格式：JPG、PNG、WEBP等</li>
          <li>可以通过拖拽或点击上传图片</li>
          <li>支持90度旋转图片方向</li>
          <li>可以直接下载旋转后的图片</li>
          <li>所有操作在本地完成，不会上传服务器</li>
          <li>建议图片大小不超过10MB以获得最佳体验</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Upload, Download, Delete, Back } from '@element-plus/icons-vue'

const router = useRouter()
const fileInput = ref(null)
const imageUrl = ref('')
const rotation = ref(0)
const previewImage = ref(null)

const triggerUpload = () => {
  fileInput.value.click()
}

const handleFileChange = (event) => {
  const file = event.target.files[0]
  if (!file) return

  if (file.size > 10 * 1024 * 1024) {
    ElMessage.warning('图片大小不能超过10MB')
    return
  }

  if (!file.type.startsWith('image/')) {
    ElMessage.error('请上传图片文件')
    return
  }

  imageUrl.value = URL.createObjectURL(file)
  rotation.value = 0
  ElMessage.success('图片上传成功')
}

const rotate = (degrees) => {
  rotation.value = (rotation.value + degrees) % 360
}

const downloadImage = () => {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  const img = previewImage.value

  const angle = rotation.value * Math.PI / 180
  const sin = Math.sin(angle)

  if (Math.abs(sin) === 1) {
    canvas.width = img.height
    canvas.height = img.width
  } else {
    canvas.width = img.width
    canvas.height = img.height
  }

  ctx.translate(canvas.width / 2, canvas.height / 2)
  ctx.rotate(angle)
  ctx.drawImage(img, -img.width / 2, -img.height / 2)

  const link = document.createElement('a')
  link.download = 'rotated_image.png'
  link.href = canvas.toDataURL('image/png')
  link.click()
  ElMessage.success('下载开始')
}

const clearImage = () => {
  imageUrl.value = ''
  rotation.value = 0
  if (fileInput.value) {
    fileInput.value.value = ''
  }
  ElMessage.success('已清除图片')
}

const returnToHome = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.image-rotator-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;

  .rotator-container {
    max-width: 1000px;
    width: 96%;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    padding: 30px;
    box-sizing: border-box;
    margin: 10px auto;

    h1 {
      text-align: center;
      color: #4a5568;
      font-size: 28px;
      margin-bottom: 30px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .content-wrapper {
      .upload-area {
        border: 2px dashed #dcdfe6;
        border-radius: 12px;
        padding: 40px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          border-color: #409EFF;
          background-color: rgba(64, 158, 255, 0.05);
        }

        .upload-icon {
          font-size: 48px;
          color: #8c939d;
          margin-bottom: 20px;
        }

        p {
          color: #606266;
          margin: 0;
        }

        .file-input {
          display: none;
        }
      }

      .image-area {
        text-align: center;

        .preview-image {
          max-width: 100%;
          max-height: 500px;
          margin-bottom: 20px;
          border-radius: 8px;
          transition: transform 0.3s ease;
        }

        .controls {
          margin-bottom: 20px;

          .el-button-group {
            .el-button {
              display: flex;
              align-items: center;
              gap: 6px;
              padding: 12px 20px;
            }
          }
        }

        .button-group {
          margin: 20px 0;

          .button-wrapper {
            display: flex;
            gap: 15px;
            justify-content: center;

            .el-button {
              min-width: 120px;
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 8px;
              padding: 12px 20px;
              font-size: 14px;
              border-radius: 8px;
              transition: all 0.3s ease;

              &:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
              }

              .el-icon {
                font-size: 16px;
              }
            }
          }
        }
      }
    }

    .notes {
      margin-top: 40px;
      padding: 20px;
      background-color: #f0f5ff;
      border-radius: 12px;
      color: #606266;
      text-align: left;

      h3 {
        color: #409EFF;
        margin: 0 0 15px 0;
        font-size: 16px;
      }

      ul {
        margin: 0;
        padding-left: 20px;
        
        li {
          margin-bottom: 8px;
          line-height: 1.6;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .image-rotator-page {
    padding: 10px;

    .rotator-container {
      padding: 20px;

      h1 {
        font-size: 24px;
        margin-bottom: 20px;
      }

      .content-wrapper {
        .image-area {
          .button-group {
            .button-wrapper {
              flex-direction: column;
              padding: 0 20px;

              .el-button {
                width: 100%;
                margin: 0;
                justify-content: center;
              }
            }
          }
        }
      }

      .notes {
        padding: 15px;

        h3 {
          font-size: 15px;
        }

        ul li {
          font-size: 13px;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style> 